<template>
	<view class="pagesbg" :class="{'pagesWhite' : userAddressList.length == 0}">
		<!-- 修改钱包名称 -->
		<uni-popup ref="addressPopup" type="center" :animation="true" @change="changePopup($event,'addressPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">确定删除选中的地址?</view>
							<view class="psdBox-input--1"></view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('addressPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(confirm,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main header_border">
			<view class="header">
				<view class="header-goBack" @click="$tools.back(1)"></view>
				<view class="header-title">{{ userAddressList.length == 0 ? '收货地址' : '地址管理' }}</view>
				<!-- <view class="header-right" @tap="$tools.jump('./add','user_address_add')">添加地址</view> -->
			</view> 
		</view> 
		
		<!-- 主体 -->
		<view class="addressMain" v-if="isShowPage">
			<view class="initNoData" v-if="userAddressList.length == 0">您还没有添加地址</view>
			<view class="addressBox" v-for="(item,index) in userAddressList" :key="index" @tap.stop="goAddr(item)">
				<view class="address">
					<view class="addrBox">
						<view class="address-top">
							<view class="name">{{ item.consignee }}</view>
							<view class="phone">{{ item.phone }}</view>
						</view>
						<view class="addr">{{ item.address }}</view>
					</view>
				</view>
				<view class="address-bottom">
					<view class="address-r" @tap.stop="checkActive(index,item)">
						<image v-if="item.remark == '1'" src="../../static/public/check-active.png" mode=""></image>
						<image v-else src="../../static/public/check.png" mode=""></image>
						<view class="mo">设为默认</view>
					</view>
					<view class="address-l">
						<view class="edit" @tap.stop="$tools.jump('./add','user_address_edit',encodeURIComponent(JSON.stringify(item)))">
							修改
						</view>
						<view class="delete" @tap.stop="deleteAddr(item)">
							删除
						</view>
					</view>
				</view>
			</view>
			
			<view class="initBtn-bg">
				<view class="initBtn" @tap="$tools.jump('./add','user_address_add')">添加收货地址</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				active: 0,
				userAddressList: [
					// {id: 1,consignee: '姚亚哲',phone: '13988887963',address: '贵州省黔东南苗族侗族自治州三穗县八弓镇454号108室',remark: '1'},
					// {id: 2,consignee: '姚亚哲',phone: '13988887963',address: '贵州省黔东南苗族侗族自治州三穗县八弓镇454号108室',remark: '2'},
				],
				comType: '',
				checkAddrItem: {},
				pages: 1,
				pageIndex: 1,
				pageSize: 10,
				isShowPage: false,
			}
		},
		onLoad(options) {
			this.comType = options.value1;
		},
		onShow() {
			this.init();
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			init(){
				this.pages = 1;
				this.pageIndex = 1;
				this.pageSize = 1;
				this.isShowPage = false;
				this.userAddressList = [];
				this.getUserAddress();
			},
			goAddr(item){
				if(this.comType == 1){
					uni.setStorageSync('address_id', item.id);
					// this.$tools.jump('/pages/confirmOrder/confirmOrder',item.id,2);
					this.$tools.back(1);
				}
			},
			// 设置默认
			setIsdefault(item){
				let that = this;
				var data = {};
				// data['user_address_oper'] = 'user_address_set';
				data['consignee'] = item.consignee;
				data['phone'] = item.phone;
				data['address'] = item.address;
				data['remark'] = 1;
				data['id'] = item.id;
				that.$Ajax('/api/address/updAddress',
				data,
				res => {
						if (res.code == 200) {
							that.$tools.toastSuccess("设置成功");
							that.userAddressList = [];
							that.getUserAddress();
						}else{
								this.$tools.toast(res.msg);
							}
					}
				)
			},
			// 删除地址
			deleteAddr(item){
				this.checkAddrItem = item;
				this.openPopup('addressPopup');
			},
			confirm(){
				let that = this;
				var data = {};
				// data['user_address_oper'] = 'user_address_del';
				// data['consignee'] = this.checkAddrItem.consignee;
				// data['phone'] = this.checkAddrItem.phone;
				// data['address'] = this.checkAddrItem.address;
				// data['remark'] = this.checkAddrItem.active == true ? 1 : 0;
				// data['addressId'] = this.checkAddrItem.id;
				that.$Ajax('/api/address/delAddress/'+this.checkAddrItem.id,
				data,
				res => {
						if (res.code == 200) {
							that.$tools.toastSuccess("删除成功");
							that.userAddressList = [];
							that.getUserAddress();
							that.hidePopup('addressPopup');
						}else{
					this.$tools.toast(res.msg);
				}
					}
				)
			},
			// 查询地址列表
			getUserAddress(){
				var data = {};
				data['pageIndex'] = this.pageIndex,
				data['pageSise'] = this.pageSise,
				this.$Ajax('/api/address/getUserAddress',
				data,
				res => {
						if (res.code == 200) {
							this.pages = res.data.pages;
							this.userAddressList = this.userAddressList.concat(res.data.list);
							this.isShowPage = true;
						}else{
							this.$tools.toast(res.msg);
						}
						console.log(this.userAddressList)
					}
				)
			},
			checkActive(index,item){
				// if(this.active = index){
					this.active = index;
					this.setIsdefault(item);
				// }
			},
			/* 弹出框公用 */
			openPopup(e) {
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				this.typePopup = e.type;
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-height{
		height: calc(100vh - 140rpx);
	}
	.addressBox{
		width: 93.6%;
		margin:20rpx auto;
		padding: 28rpx 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		&:nth-last-child(1){
			margin-bottom: 140rpx;
		}
	}
	
	.addressMain{
		&:nth-last-child(1){
			margin-bottom: 200rpx;
		}
	}
	
	.address{
		@include flexLeft;
		position: relative;
		.addrBox{
			width: 100%;
		}
		&-top{
			@include flexLeft;
			.name{
				font-weight: bold;
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.90);
				margin-right: 24rpx;
			}
			.phone{
				font-weight: bold;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.90);
			}
		}
		.addr{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.90);
			width: 100%;
			margin: 16rpx 0 30rpx;
			word-break: break-all;
		}
		.addrImg{
			width: 72rpx;
			height: 72rpx;
			margin-right: 16rpx;
		}
		&-bottom{
			@include flexBetween;
			border-top: 1px solid #E9E9E9;
			padding-top: 30rpx;
		}
		&-r{
			@include flexLeft;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.mo{
				font-family: PingFangSC-Regular, PingFangSC-Regular;
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(0,0,0,0.9);
				margin-left: 16rpx;
			}
		}
		&-l{
			@include flexRight;
			.edit{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.90);
				margin-right: 20rpx;
				image{
					width: 36rpx;
					height: 36rpx;
				}
			}
			.delete{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FA6A45;
				background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				image{
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
	.noData{
		margin-top: 240rpx;
		.noAddr{
			width: 260rpx;
			height: 260rpx;
			margin: auto;
			text-align: center;
		}
		.noTitle{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 48rpx auto 32rpx;
			text-align: center;
		}
		.noBtn{
			font-size: 28rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			background: #FF4040;
			border-radius: 16rpx;
			margin: auto;
			text-align: center;
			width: 45%;
			padding: 18rpx 0;
		}
	}
	
	.initBtn{
		position: fixed;
		width: 93.6%;
		bottom: 20rpx;
		left: 3.2%;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0;
		background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
		border-radius: 80rpx ;
	}
	
</style>